// 注册页面业务逻辑

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取手机号输入框和标签
    const phoneInput = document.querySelector('input[placeholder="请输入手机号"]');
    const phoneLabel = document.querySelector('label:has(+ input[placeholder="请输入手机号"])');
    
    // 获取验证码按钮
    const verifyBtn = document.querySelector('.verify-btn');
    if (verifyBtn) {
        // 为验证码按钮添加点击事件
        verifyBtn.addEventListener('click', function() {
            // 检查手机号是否已输入且格式正确
            if (!phoneInput || !phoneInput.value || phoneInput.value.length !== 11) {
                alert('请输入正确的手机号');
                return;
            }

            // 禁用按钮并开始倒计时
            let countdown = 60;
            verifyBtn.disabled = true;
            verifyBtn.classList.add('disabled');
            verifyBtn.textContent = `${countdown}秒后重新获取`;

            // 设置倒计时定时器
            const timer = setInterval(() => {
                countdown--;
                verifyBtn.textContent = `${countdown}秒后重新获取`;
                
                if (countdown <= 0) {
                    // 清除定时器，恢复按钮状态
                    clearInterval(timer);
                    verifyBtn.disabled = false;
                    verifyBtn.classList.remove('disabled');
                    verifyBtn.textContent = '获取验证码';
                }
            }, 1000);

            // 调用获取验证码API（通过全局window.api访问）
            window.api.verificationCode.getVerificationCode(phoneInput.value)
                .then(result => {
                    if (result.success) {
                        // 学生实验项目，弹窗显示验证码
                        alert('验证码：' + result.verificationCode);
                    }
                })
                .catch(error => {
                    console.error('获取验证码失败:', error);
                    alert('网络错误，请稍后重试');
                    // 网络错误时，恢复按钮状态
                    clearInterval(timer);
                    verifyBtn.disabled = false;
                    verifyBtn.classList.remove('disabled');
                    verifyBtn.textContent = '获取验证码';
                });
            });
        }
    
    if (!phoneInput || !phoneLabel) return;
    
    // 为手机号输入框添加键盘输入事件，只允许数字输入
    phoneInput.addEventListener('input', function(e) {
        // 移除非数字字符
        this.value = this.value.replace(/[^\d]/g, '');
    });
    
    // 为手机号输入框添加失去焦点事件，验证手机号长度
    phoneInput.addEventListener('blur', function() {
        // 检查是否已经有错误提示元素
        let errorTip = phoneInput.nextElementSibling;
        if (errorTip && errorTip.classList.contains('error-tip')) {
            // 如果已经有，先移除
            errorTip.remove();
        }
        
        // 重置标签样式
        phoneLabel.innerHTML = '手机号';
        phoneLabel.style.color = '';
        
        // 检查手机号长度
        if (this.value.length > 0 && this.value.length !== 11) {
            // 添加红色*号
            phoneLabel.innerHTML = '手机号*';
            phoneLabel.style.color = '#ff4d4f';
            
            // 创建并显示错误提示
            errorTip = document.createElement('div');
            errorTip.className = 'error-tip';
            errorTip.textContent = '手机号码不正确';
            errorTip.style.position = 'absolute';
            errorTip.style.top = '50%';
            errorTip.style.right = '10px';
            errorTip.style.transform = 'translateY(-50%)';
            errorTip.style.backgroundColor = '#fff2f0';
            errorTip.style.color = '#ff4d4f';
            errorTip.style.padding = '4px 8px';
            errorTip.style.borderRadius = '4px';
            errorTip.style.fontSize = '12px';
            errorTip.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)';
            errorTip.style.zIndex = '10';
            errorTip.style.lineHeight = '24px';
            errorTip.style.height = '24px';
            errorTip.style.display = 'inline-flex';
            errorTip.style.alignItems = 'center';
            errorTip.style.justifyContent = 'center';
            
            // 设置父元素为相对定位，以便错误提示正确定位
            const formGroup = this.closest('.form-group');
            if (formGroup) {
                formGroup.style.position = 'relative';
            }
            
            // 将错误提示添加到输入框后面
            this.parentNode.insertBefore(errorTip, this.nextSibling);
            
            // 添加错误边框样式
            this.style.borderColor = '#ff4d4f';
        } else {
            // 输入正确，移除错误边框
            this.style.borderColor = '';
        }
    });
    
    // 为手机号输入框添加获得焦点事件，移除错误提示
    phoneInput.addEventListener('focus', function() {
        // 检查是否有错误提示元素
        let errorTip = this.nextElementSibling;
        if (errorTip && errorTip.classList.contains('error-tip')) {
            errorTip.remove();
        }
        
        // 重置标签样式
        phoneLabel.innerHTML = '手机号';
        phoneLabel.style.color = '';
        
        // 移除错误边框
        this.style.borderColor = '';
    });
    
    // 获取真实姓名输入框和标签
    const nameInput = document.querySelector('input[placeholder="请输入真实姓名"]');
    const nameLabel = document.querySelector('label:has(+ input[placeholder="请输入真实姓名"])');
    
    if (!nameInput || !nameLabel) return;
    
    // 为真实姓名输入框添加失去焦点事件，验证输入内容
    nameInput.addEventListener('blur', function() {
        // 检查是否已经有错误提示元素
        let errorTip = nameInput.nextElementSibling;
        if (errorTip && errorTip.classList.contains('error-tip')) {
            // 如果已经有，先移除
            errorTip.remove();
        }
        
        // 重置标签样式
        nameLabel.innerHTML = '真实姓名';
        nameLabel.style.color = '';
        
        // 检查输入内容是否只包含英文字符和中文字符
        if (this.value.length > 0) {
            // 正则表达式匹配中文字符和英文字母
            const validPattern = /^[\u4e00-\u9fa5a-zA-Z]+$/;
            
            if (!validPattern.test(this.value)) {
                // 清空输入框
                this.value = '';
                
                // 添加红色*号
                nameLabel.innerHTML = '真实姓名*';
                nameLabel.style.color = '#ff4d4f';
                
                // 创建并显示错误提示
                errorTip = document.createElement('div');
                errorTip.className = 'error-tip';
                errorTip.textContent = '格式不正确';
                errorTip.style.position = 'absolute';
                errorTip.style.top = '50%';
                errorTip.style.right = '10px';
                errorTip.style.transform = 'translateY(-50%)';
                errorTip.style.backgroundColor = '#fff2f0';
                errorTip.style.color = '#ff4d4f';
                errorTip.style.padding = '4px 8px';
                errorTip.style.borderRadius = '4px';
                errorTip.style.fontSize = '12px';
                errorTip.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)';
                errorTip.style.zIndex = '10';
                errorTip.style.lineHeight = '24px';
                errorTip.style.height = '24px';
                errorTip.style.display = 'inline-flex';
                errorTip.style.alignItems = 'center';
                errorTip.style.justifyContent = 'center';
                
                // 设置父元素为相对定位，以便错误提示正确定位
                const formGroup = this.closest('.form-group');
                if (formGroup) {
                    formGroup.style.position = 'relative';
                }
                
                // 将错误提示添加到输入框后面
                this.parentNode.insertBefore(errorTip, this.nextSibling);
                
                // 添加错误边框样式
                this.style.borderColor = '#ff4d4f';
            } else {
                // 输入正确，移除错误边框
                this.style.borderColor = '';
            }
        }
    });
    
    // 为真实姓名输入框添加获得焦点事件，移除错误提示
    nameInput.addEventListener('focus', function() {
        // 检查是否有错误提示元素
        let errorTip = this.nextElementSibling;
        if (errorTip && errorTip.classList.contains('error-tip')) {
            errorTip.remove();
        }
        
        // 重置标签样式
        nameLabel.innerHTML = '真实姓名';
        nameLabel.style.color = '';
        
        // 移除错误边框
        this.style.borderColor = '';
    });
    
    // 获取身份证号输入框和标签
    const idCardInput = document.querySelector('input[placeholder="请输入身份证号"]');
    const idCardLabel = document.querySelector('label:has(+ input[placeholder="请输入身份证号"])');
    
    if (!idCardInput || !idCardLabel) return;
    
    // 为身份证号输入框添加键盘输入事件，只允许数字和大写字母X输入
    idCardInput.addEventListener('input', function(e) {
        // 移除非数字和非大写X字符，并将小写x转换为大写X
        this.value = this.value.replace(/[^\dX]/gi, '').toUpperCase();
    });
    
    // 为身份证号输入框添加失去焦点事件，验证身份证号长度
    idCardInput.addEventListener('blur', function() {
        // 检查是否已经有错误提示元素
        let errorTip = idCardInput.nextElementSibling;
        if (errorTip && errorTip.classList.contains('error-tip')) {
            // 如果已经有，先移除
            errorTip.remove();
        }
        
        // 重置标签样式
        idCardLabel.innerHTML = '身份证号';
        idCardLabel.style.color = '';
        
        // 检查身份证号长度
        if (this.value.length > 0 && this.value.length !== 18) {
            // 添加红色*号
            idCardLabel.innerHTML = '身份证号*';
            idCardLabel.style.color = '#ff4d4f';
            
            // 创建并显示错误提示
            errorTip = document.createElement('div');
            errorTip.className = 'error-tip';
            errorTip.textContent = '身份证号不正确';
            errorTip.style.position = 'absolute';
            errorTip.style.top = '50%';
            errorTip.style.right = '10px';
            errorTip.style.transform = 'translateY(-50%)';
            errorTip.style.backgroundColor = '#fff2f0';
            errorTip.style.color = '#ff4d4f';
            errorTip.style.padding = '4px 8px';
            errorTip.style.borderRadius = '4px';
            errorTip.style.fontSize = '12px';
            errorTip.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)';
            errorTip.style.zIndex = '10';
            errorTip.style.lineHeight = '24px';
            errorTip.style.height = '24px';
            errorTip.style.display = 'inline-flex';
            errorTip.style.alignItems = 'center';
            errorTip.style.justifyContent = 'center';
            
            // 设置父元素为相对定位，以便错误提示正确定位
            const formGroup = this.closest('.form-group');
            if (formGroup) {
                formGroup.style.position = 'relative';
            }
            
            // 将错误提示添加到输入框后面
            this.parentNode.insertBefore(errorTip, this.nextSibling);
            
            // 添加错误边框样式
            this.style.borderColor = '#ff4d4f';
        } else {
            // 输入正确，移除错误边框
            this.style.borderColor = '';
        }
    });
    
    // 为身份证号输入框添加获得焦点事件，移除错误提示
    idCardInput.addEventListener('focus', function() {
        // 检查是否有错误提示元素
        let errorTip = this.nextElementSibling;
        if (errorTip && errorTip.classList.contains('error-tip')) {
            errorTip.remove();
        }
        
        // 重置标签样式
        idCardLabel.innerHTML = '身份证号';
        idCardLabel.style.color = '';
        
        // 移除错误边框
        this.style.borderColor = '';
    });

    // 获取用户名输入框
    const usernameInput = document.querySelector('input[placeholder="请设置用户名"]');
    // 获取设置密码输入框
    const passwordInput = document.querySelector('input[placeholder="请设置密码"]');
    // 获取确认密码输入框
    const confirmPasswordInput = document.querySelector('input[placeholder="请再次输入密码"]');
    // 获取验证码输入框
    const verificationCodeInput = document.querySelector('.verify-input');
    // 获取确认注册按钮
    const confirmBtn = document.querySelector('.confirm-btn');
    
    if (!confirmBtn) return;
    
    // 为确认注册按钮添加点击事件
    confirmBtn.addEventListener('click', function() {
        // 收集表单数据
        const userInfo = {
            username: usernameInput ? usernameInput.value.trim() : '',
            realName: nameInput ? nameInput.value.trim() : '',
            idCard: idCardInput ? idCardInput.value.trim() : '',
            password: passwordInput ? passwordInput.value : '',
            confirmPassword: confirmPasswordInput ? confirmPasswordInput.value : '',
            phoneNumber: phoneInput ? phoneInput.value.trim() : '',
            verificationCode: verificationCodeInput ? verificationCodeInput.value.trim() : ''
        };
        
        // 基本客户端验证
        if (!userInfo.username) {
            alert('请设置用户名');
            return;
        }
        
        if (!userInfo.realName) {
            alert('请输入真实姓名');
            return;
        }
        
        if (!userInfo.idCard || userInfo.idCard.length !== 18) {
            alert('请输入正确的身份证号');
            return;
        }
        
        if (!userInfo.password || userInfo.password.length < 6) {
            alert('密码长度不能少于6位');
            return;
        }
        
        if (userInfo.password !== userInfo.confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }
        
        if (!userInfo.phoneNumber || userInfo.phoneNumber.length !== 11) {
            alert('请输入正确的手机号');
            return;
        }
        
        if (!userInfo.verificationCode) {
            alert('请输入验证码');
            return;
        }
        
        // 调用注册API
        window.api.userRegistration.registerUser(userInfo)
            .then(result => {
                if (result.success) {
                    console.log('注册成功，返回结果:', result);
                    console.log('检查cookie是否设置成功:', document.cookie);
                    
                    // 如果设置了令牌，显示令牌信息
                    if (result.token) {
                        console.log('获取到的令牌:', result.token);
                        // 尝试直接读取cookie中的令牌
                        if (window.utils && window.utils.cookie && window.utils.cookie.getAuthToken) {
                            const cookieToken = window.utils.cookie.getAuthToken();
                            console.log('从cookie中读取的令牌:', cookieToken);
                        }
                    }
                    
                    alert('注册成功！请在开发者工具中检查cookie设置情况。点击确定后将跳转到登录页面。');
                    // 注册成功后跳转到登录页面
                    window.location.href = 'login.html';
                }
            })
            .catch(error => {
                alert('注册失败：' + error.message);
            });
    });
});